<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .box {
    width: 1000px;
    height: 100px;
    margin: 30px auto;
    border: 2px solid rgba(157, 164, 169);
    border-radius: 0 20px 0 20px;
  }

  P {
    margin-bottom: 20px;
    color: rgba(157, 164, 169);
  }

  span {
    margin-right: 60px;
    color: rgba(157, 164, 169);
  }
</style>

<body>

  <script>
    let mi = {
      name: 'mi',
      uname: '小米小米10青春版',
      num: '100230124914',
      kg: '0.55kg',
      address: '中国'
    }
    mi.uname = '小米10PLUS'
    mi.color = '粉色'
    console.log(mi);
    document.write(`
  <div class="box">
    <p>品牌：小米（MI）</p>
    <span>商品名称：${mi.uname}</span><span>商品编号：${mi.num}</span><span>商品重量：${mi.kg}</span><span>商品产地：${mi.address}</span><span>颜色:${mi.color}</span>
  </div>
`)
  </script>
</body>

</html>